<script>
export default {
  name: "inlineStyles",
  data() {
    return {
      style1: {
        "font-size": "30px",
        fontSize: "30px"
      },
      style2: {
        color: 'red'
      }
    }

  },
  methods: {
    getColor(n) {
      if (n === 1) {
        return {color: "red"}
      } else if (n === 2) {
        return {color: "green"}
      }
    }

  }
}
</script>

<template>
  <div>
    <div style="font-size: 30px">size</div>
    <!--  对象-->
    <div :style="{'font-size': '30px'}">size</div>
    <div :style="style1">size</div>
    <!--  数组-->
    <div :style="[style1,style2]">size</div>
    <!--  函数返回值-->
    <div :style="getColor(1)">getColor</div>
    <div :style="getColor(2)">getColor</div>
  </div>
</template>

<style scoped lang="less">

</style>